<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">后台管理系统</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
        <el-form-item prop="user_name">
          <el-input v-model.trim="ruleForm.user_name" placeholder="请输入用户名" @keyup.enter.native="submitForm('ruleForm')">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.password"
            @keyup.enter.native="submitForm('ruleForm')"
          >
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </div>
        <p class="login-tips">Tips : 请输入正确的账号及密码。</p>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as api from "../../http/api.js";
export default {
  data: function() {
    return {
      ruleForm: {
        user_name: "admin",
        password: "admin888"
      },
      rules: {
        user_name: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      // 登陆接口：传递2个参数：
      let data = {
        user_name: this.ruleForm.user_name,
        password: this.ruleForm.password
      };
      this.$post(api.login, data)
        .then(res => {
          if (res.status == 0) {
             this.$message({
                showClose: true,
                message: "登录成功",
                type: "success"
              });
            // 登陆的成功后会返回一个TOken，然后我们把他保存到缓存中！同时保存账号类型！是超级管理还是普通管理后续有用！            
            sessionStorage.setItem("Token", res.data.token);
            sessionStorage.setItem("Authority", res.data.authority);
            sessionStorage.setItem("ms_username", res.data.user_name);
            if (res.data.authority == 0) {
              //如果是超级管理员！
              
              this.$router.push("/");
              
            } else {
              //如果是普通管理员！
              
              this.$router.push("/");
            }
          } else {
            // 账号密码失败弹出的消息
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../../assets/img/login-bg.jpg);
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
</style>